	/* + jquery tiny carousel */
	/*  @see js file : iLeftover > 0 cause trouble  in alignment */
	/* viewport h:w should be same as overview.li h:w, slider-code.h = viewport.h +45px */
	/* viewport h:w should be in 3:4 aspect ratio */
	
	#slider-code { height:345px; overflow:hidden; }
	#slider-code .viewport {
		float: left; width: 400px; height: 300px;
		overflow: hidden; position: relative;padding:10px;
	}
	#slider-code .buttons {
		display: block; margin: 120px 10px 0 0; float: left;
		background: url("/css/images/tiny-buttons.png");
		width: 36px; height: 37px;
	}
	
	#slider-code .next { margin: 120px 10px 0 10px;  }
	#slider-code .prev { background-position: 0 -37px; }
	#slider-code .disable { visibility: hidden; }
	#slider-code .overview { list-style: none; padding: 0; margin: 0;  position: absolute; left: 0; top: 0; }
	#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px;
		height: 300px; border: 5px solid #dcdcdc; width: 400px;
	}
	
	#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
	#slider-code .pager li { float: left; }
	#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center;
		padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block;
	}
	#slider-code .active { color: #fff; background-color:  #555555; }
	#slider-code a { font-size:14px; font-weight:bold;}
	
	
	/*
	 * Here is the trick for resizing slider images. Slider images
	 * are full size images that we force to fit into a 400x300 window
	 * without resizing we will only get an inset of large images
	 * 
	 */
	  
	
	#slider-code img {
		width: auto;
		height: auto;
		max-width: 400px;
		max-height: 300px;
	}
	
